import styles from "../styles.less";
import {Card} from "antd";
import React, {useEffect} from "react";
import {Line} from '@ant-design/plots';
import {connect} from "umi";
import dayjs from "dayjs";
import {getTimeDistance} from "@/utils/utils";

const ChargeAmountAnalyze = (props) => {

  const {list, dispatch} = props;
  const {rangePickerValue, setRangePickerValue} = props.data;

  const selectDate = (type) => {
    setRangePickerValue(getTimeDistance(type));
  };

  useEffect(() => {
    if (rangePickerValue) {
      let startDate = dayjs(rangePickerValue[0]).format("YYYY-MM-DD");
      let endDate = dayjs(rangePickerValue[1]).format("YYYY-MM-DD");
      dispatch({
        type: 'PIndexChargeAmountAnalyze/fetchChargeAmountAnalyze',
        payload: {startDate, endDate, type: startDate === endDate ? 0 : 1}
      });
    }
  }, [rangePickerValue]);

  const isActive = (type) => {

    if (!rangePickerValue) {
      return '';
    }

    const value = getTimeDistance(type);
    if (!value) {
      return '';
    }

    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return '';
    }

    if (
      rangePickerValue[0].isSame(value[0], 'day') &&
      rangePickerValue[1].isSame(value[1], 'day')
    ) {
      return styles.currentDate;
    }

    return '';
  };

  const config = {
    data: list,
    padding: 'auto',
    xField: 'tag',
    yField: 'total',
    meta: {
      total: {
        alias: '交易金额',
        formatter: (v) => {
          let value = (v / 100).toFixed(2);
          return `${value}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)
        },
      },
    },
    smooth: true,
  };

  return (
    <Card
      className={styles.myCard2739482}
      title={"交易金额"} bordered={false} style={{marginBottom: 5}}
      extra={<div className={styles.cardExtraWrap}>
        <div className={styles.cardExtra}>
          <a className={isActive('today')} onClick={() => selectDate('today')}>今日</a>
          <a className={isActive('week')} onClick={() => selectDate('week')}>本周</a>
          <a className={isActive('month')} onClick={() => selectDate('month')}>本月</a>
        </div>
      </div>}>
      <div style={{height: 'calc(33vh - 150px)'}}>
        <Line {...config} />
      </div>
    </Card>
  );
};

export default connect(({PIndexChargeAmountAnalyze}) => {
  return {
    list: PIndexChargeAmountAnalyze.list,
  };
})(ChargeAmountAnalyze);